<template>
  <div>
    <search-content />
    <div v-if="category" class="breadcrumb-nav-wrapper px1000 mt20 mb20">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          {{ categoryDetail.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <search-component :conditions="conditions" @query="query" />
    <div class="project_wrapper">
      <div class="px1200">
        <projects :projects="projects" />
        <div class="pagination_wrapper">
          <el-pagination
            :hide-on-single-page="true"
            :current-page="currentPage"
            :page-size="pagesize"
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SearchComponent from '~/components/search/SearchComponent'
import Projects from '~/components/index/Projects'
import SearchContent from '~/components/common/SearchContent'
import Api from '~/api'
export default {
  name: 'SearchIndex',
  components: {
    SearchComponent,
    Projects,
    SearchContent
  },
  async asyncData ({ store }) {
    store.commit('setMenuState', 'search')
    await store.dispatch('setItemConditions')
  },
  data () {
    return {
      currentPage: 1,
      pagesize: 10,
      projects: [],
      total: 5,
      categoryDetail: {}
    }
  },
  head: {
    title: '英联智融|项目搜索'
  },
  computed: {
    keyword () {
      return this.$store.state.searchKeyword
    },
    conditions () {
      return this.$store.state.conditions
    },
    category () {
      return this.$store.state.searchCategory
    }
  },
  watch: {
    keyword (n, m) {
      this.currentPage = 1
      this.getItems()
    },
    deep: true,
    immediate: true

  },
  mounted () {
    this.getItems()
    if (this.category) {
      this.getCategoryDetail(this.category)
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.currentPage = val
      this.getItems(this.currentPage, this.pagesize)
    },
    getCategoryDetail (id) {
      Api.getCategoryDetail(id).then((res) => {
        this.categoryDetail = res.data
      })
    },
    getItems (conditions) {
      Api.getItemSearch({
        q: this.$store.state.searchKeyword,
        c: this.$store.state.searchCategory,
        pageSize: this.pagesize || 10,
        currentPage: this.currentPage || 1,
        conditions
      }).then((res) => {
        this.projects = res.data.items
        this.total = res.data.total
      })
    },
    query (data) {
      if (typeof data === 'undefined') {
        return
      }
      let { area, crowd, industry, money, position, type } = data
      if (typeof area.id !== 'undefined') {
        area = area.id
      }
      if (typeof crowd.id !== 'undefined') {
        crowd = crowd.id
      }
      if (typeof industry.id !== 'undefined') {
        industry = industry.id
      }
      if (typeof money.id !== 'undefined') {
        money = money.id
      }
      if (typeof position.id !== 'undefined') {
        position = position.id
      }
      if (typeof type.id !== 'undefined') {
        type = type.id
      }
      const p = { area, crowd, industry, money, position, type }
      Object.keys(p).forEach(function (key) {
        if (typeof p[key] !== 'string') {
          delete p[key]
        }
      })
      this.$store.commit('setSelectedCondition', p)
      this.getItems(p)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "static/style/style.css";
.project_wrapper{
  background-color: #f3f3f3;
}

.pagination_wrapper{
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}
</style>
